<template>
	<view>
		<view class="list">
			<view class="item" v-for="item in list" :key="item.id" @click="jumps(item)">
				<view class="titles u-flex">
					<view class="title u-flex-1 u-line-1">{{item.house_name}}</view>
					<view class="date">{{$u.date(item.createtime,'yyyy-mm-dd')}}</view>
				</view>
				<view class="item-info u-flex" @click="">
					<view class="avatar">
						<image :src="imgUrl(item.avatar)"></image>
					</view>
					<view class="info u-flex-1">
						<view class="info-title u-flex">
							<view class="name">{{item.nickname}}</view>
							<view class="type">房联</view>
							<view class="score">{{Number(item.score)}}</view>
						</view>
						<view class="phone">{{item.phone}}</view>
					</view>
					<u-icon name="arrow-right" color="#666" size="30"></u-icon>
				</view>
			</view>
		</view>
		
		<u-empty v-if="isEmpty" text="暂无相关信息" margin-top="200"></u-empty>
		<view style="padding-bottom: 10rpx;" v-if="p > 1">
			<u-loadmore :status="status" />
		</view>
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				p:1,
				list:[],
				status:'loading',
				isEmpty:!1
			}
		},
		methods: {
			getList(){
				this.status = 'loading'
				this.$u.post('/api/user/lookLog',{
					p:this.p
				}).then(res=>{
					this.list = this.p == 1 ? res : this.list.concat(res)
					this.status = res.length  === 20 ? 'loadmore' : 'nomore'
					this.isEmpty = (this.p === 1 && res.length === 0) ? !0 : !1
					uni.stopPullDownRefresh()
				})
			},
			jumps(item){
				this.jump(`/pages/house/${this.$app.TYPE_MAP[item.build_type - 1].key}/detail?id=${item.house_id}`)
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			if(this.status == 'loadmore'){
				this.p ++
				this.getList()
			}
		}
	}
</script>

<style lang="scss">
	
	.list{
		padding: 20rpx 40rpx;
		.item{
			box-shadow: 0rpx 2rpx 16rpx rgba(153, 153, 153, 0.15);border-radius: 20rpx;padding: 28rpx 30rpx;margin-top: 20rpx;
			.titles{
				.name{font-weight: bold;font-size: 30rpx;}
				.date{color: #666;white-space: nowrap;}
			}
		}
	}
	
	
	.user-item {
		padding-top: 20rpx;
		image {width: 110rpx;flex: 0 0 110rpx;height: 110rpx;margin-right: 20rpx;border-radius: 50%;display: block;}
		.info-wrap{
			width: 0;padding: 10rpx 0;
			.top-title{
				.title{
					overflow: hidden;
					view{margin: 0 6rpx;}
					.name{font-size: 32rpx;font-weight: bold;margin-left: 0;}
					.type{background-color: #4edcc5;color: #fff;font-size: 24rpx;padding: 2rpx 10rpx;border-radius: 6rpx;white-space: nowrap;}
					.score{color: #f00;font-size: 32rpx;margin-right: 0;}
				}
			}
			.phone{color: #666;padding-top: 6rpx;}
		}
		.icon{padding: 0 20rpx 0 0rpx;}
	}
</style>
